<template>

  <div class="zhanshi">

    <!-- top -->
    <div class="top">
      <div
        class="top-item"
      >
        <div class="title">
          <img src="@/assets/login_images/history-fill.png" alt="">
          <p>有效运动负荷时间：{{ this.time }}</p>
        </div>
        <div class="line">
          <img src="@/assets/login_images/map-pin-fill.png" alt="" class="dingwei" :style="{'left':`${this.time_left}%`}">
          <div class="line-center">
            <div class="center-item">偏低</div>
            <div class="center-item">适宜</div>
            <div class="center-item">偏高</div>
          </div>
          <div class="zb">
            <span>0</span>
            <span>{{ this.time1 }}</span>
            <span>{{ this.time2 }}</span>
            <span />
          </div>
        </div>
      </div>
      <!--  -->
      <div
        class="top-item"
      >
        <div class="title">
          <img src="@/assets/login_images/heart-pulse-fill.png" alt="">
          <p>有效运动负荷：{{ this.effTrimp }}</p>
        </div>
        <div class="line">
          <img src="@/assets/login_images/map-pin-fill.png" alt="" class="dingwei dingwei2" :style="{'left':this.eff_left}" :data-it="this.eff_left">
          <div class="line-center">
            <div class="center-item">偏低</div>
            <div class="center-item">适宜</div>
            <div class="center-item">偏高</div>
          </div>
          <div class="zb">
            <span>0</span>
            <span>{{ this.eff1 }}</span>
            <span>{{ this.eff2 }}</span>
            <span />
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import HisRecords from '@/api/hisRecords.js'
export default {
  name: 'YouXiao',
  props: {
    history_obj: {
      type: [Object]
    }
  },
  data() {
    return {
      effTrimp: '',
      time: '',
      time1: '',
      time2: '',
      eff1: '',
      eff2: '',
      time_left: 0,
      eff_left: 0,
      test: ''
    }
  },

  mounted() {
    this.RecordID = this.$route.params.id
    this.BasicDetail()
    console.log(this.time)
  },
  methods: {
    async BasicDetail() {
      const params = {
        RecordID: this.RecordID
      }
      const result = await HisRecords.BasicDetail(params) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.effTrimp = result.result.effTrimp
        // this.effTrimp = '160'
        this.time = result.result.time
        // this.time = '40:00'
        const effTrimp_Describe = result.result.effTrimp_Describe
        const time_Describe = result.result.time_Describe
        const eff_list = effTrimp_Describe.split('-')
        const time_list = time_Describe.split('-')
        this.time1 = time_list[0]
        this.time2 = time_list[1]
        this.eff1 = eff_list[0]
        this.eff2 = eff_list[1]

        if (this.time.split(':')[0] < this.time1) { // 小于第一段
          this.time_left = this.time.split(':')[0] / this.time1 * 33
        } else if (this.time.split(':')[0] > this.time1 && this.time.split(':')[0] < this.time2) { // 大于1小于2
          this.time_left = (this.time.split(':')[0] - this.time1) / (this.time2 - this.time1) * 33 + 33
        } else if (this.time.split(':')[0] > this.time2) {
          this.time_left = (this.time.split(':')[0] - this.time2) / (this.time2) * 33 + 66
        }
        if (parseInt(this.effTrimp) < parseInt(this.eff1)) { // 小于第一段
          this.eff_left = this.effTrimp / this.eff1 * 32 + '%'
        } else if (parseInt(this.effTrimp) > parseInt(this.eff1) && parseInt(this.effTrimp) < parseInt(this.eff2)) { // 大于1小于2
          this.eff_left = ((parseInt(this.effTrimp) - this.eff1) / (this.eff2 - this.eff1) * 33 + 33) + '%'
        } else if (parseInt(this.effTrimp) > parseInt(this.eff2)) {
          this.eff_left = (parseInt(this.effTrimp) - this.eff2) / (this.eff2) * 33 + 66 + '%'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.zhanshi{
  // padding: 30rpx;
  .top{
    overflow: hidden;
    padding-left: 25px;
    padding-bottom: 40px;
    height: 400px;
    .top-item{
      margin-top: 10px;
      .title{
        display: flex;
        justify-content: flex-start;
        img{
          width: 20px;
          height: 20px;
          // background-color: black;
        }
        p{
          color: rgba(0, 0, 0, 0.85);
          font-size: 16px;
          margin: 0;
          line-height: 22px;
          margin-left: 8px;
        }
      }
      .line{
        margin-top: 20px;
        padding: 30px 0;
        position: relative;
        .dingwei{
          top: 0;
          left:25%;
          position: absolute;
          width: 30px;
          height: 30px;
          // background-color: black;
        }
        .line-center{
          width:100%;
          display: flex;
          .center-item{
            width: 33%;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            background-color: #ffc900;
            &:nth-of-type(2){
              background-color: #41cb89;
            }
            &:nth-of-type(3){
              background-color: #f04864;
            }
          }
        }
        .zb{
          margin-top: 20px;
          position: relative;
          span{
            position: absolute;
            left: -5px;
            top: 0;
            color: rgba(0, 0, 0, 0.5);
            font-size: 16px;
            &:nth-of-type(2){
              left: 295px;
            }
            &:nth-of-type(3){
              left: 595px;
            }
            &:nth-of-type(4){
              left: 895px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width:1400px) {
  .zhanshi .top .top-item .line{
    margin-top: 0;
  }
}
</style>
